<template>
    <view class="pub_page pub_manage_list">
        <pub-head headerName="charge" :headerConfig="headerConfig"></pub-head>
        <div class="page_box page_box_scroll" :style="{ 'height': `calc(100vh - ${otherHeight})` }">
            <z-paging ref="Zpaging" class="lis_div" v-model="list" @query="getList" :refresher-enabled="false"
                :fixed="false" :height="'100%'">
                <!-- 收费方案 -->
                <div class="lis_div" v-if="openType == 1">
                    <div class="lis" v-for="(li, key) in list" :key="key" @click="liClick(li)">
                        <div class="remark">
                            <image class="icon" mode="aspectFit"
                                src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_26.png" />
                            {{ li.planName }}
                        </div>
                        <div class="li">
                            <div class="p_1">创建时间</div>
                            <div class="p_2">{{ li.createTime }}</div>
                        </div>
                        <div class="li">
                            <div class="p_1">收费类型</div>
                            <div class="p_2">{{ li.billingTypeName }}</div>
                        </div>
                        <div class="li">
                            <div class="p_1">价格(元/度)</div>
                            <div class="p_2">{{ li.priceConfig.unitPrice }}</div>
                        </div>
                        <div class="edit" @click.stop="toManageInfo({ openType: 1, editId: li.pricePlanId })">
                            <image class="icon" mode="aspectFit"
                                src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_54.png" />
                        </div>
                    </div>
                </div>
                <!-- 预警方案 -->
                <div class="lis_div" v-if="openType == 2">
                    <div class="lis" v-for="(li, key) in list" :key="key" @click="liClick(li)">
                        <div class="remark">
                            <image class="icon" mode="aspectFit"
                                src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_27.png" />
                            {{ li.name }}
                        </div>
                        <div class="li">
                            <div class="p_1">创建时间</div>
                            <div class="p_2">{{ li.createTime }}</div>
                        </div>
                        <div class="li">
                            <div class="p_1">预警余额线</div>
                            <div class="p_2">{{ li.warnBalance }}元</div>
                        </div>
                        <div class="li">
                            <!-- // todo -->
                            <div class="p_1">预警操作</div>
                            <div class="p_2">{{ li.warnMethodName }}</div>
                        </div>
                        <div class="li">
                            <div class="p_1">备注</div>
                            <div class="p_2">{{ li.remark }}</div>
                        </div>
                        <div class="edit" @click.stop="toManageInfo({ openType: 2, editId: li.Id })">
                            <image class="icon" mode="aspectFit"
                                src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_54.png" />
                        </div>
                    </div>
                </div>
                <!-- 用户管理 -->
                <div class="lis_div lis_div_3" v-if="openType == 3">
                    <div class="search_box" :style="{ 'top': `calc(${headerHeight} - 20rpx)` }">
                        <div class="sinput">
                            <image class="icon" mode="aspectFill"
                                src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_52.png" />
                            <input class="inp" type="text" placeholder="请输入客户手机号或姓名" placeholder-style="color:#bbb"
                                v-model="keyword" @confirm="keywordConfirm">
                        </div>
                    </div>
                    <div class="lis" v-for="(li, key) in list" :key="key" @click="liClick(li)">
                        <div class="remark">
                            <image class="icon" mode="aspectFit"
                                src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_28.png" />
                            {{ li.username }}
                            <div class="right" v-if="li.status == 1"><text class="yuan"></text> 正常入住</div>
                            <div class="right right_1" v-else><text class="yuan"></text> 已禁用</div>
                        </div>
                        <div class="li">
                            <div class="p_1">手机号</div>
                            <div class="p_2">{{ li.phone }}</div>
                        </div>
                        <div class="li">
                            <div class="p_1">房间数</div>
                            <div class="p_2">{{ li.roomCount }}间</div>
                        </div>
                        <div class="edit" @click.stop="toManageInfo({ openType: 3, editId: li.userId })">
                            <image class="icon" mode="aspectFit"
                                src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_54.png" />
                        </div>
                    </div>
                </div>
                <!-- 区域管理 -->
                <div class="lis_div lis_div_4" v-if="openType == 4">
                    <div class="lis" v-for="(li, key) in list" :key="key" @click="liClick(li)">
                        <div class="remark">
                            <image class="icon" mode="aspectFit"
                                src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_29.png" />
                            {{ li.areaName }}
                            <div class="right"
                                @click.stop="$comFun.openWin('/pages/manage/manage_list', { openType: 5, areaId: li.areaId, areaName: li.areaName })">
                                房间管理
                            </div>
                        </div>
                        <div class="li">
                            <div class="p_1">创建时间</div>
                            <div class="p_2">{{ li.createTime }}</div>
                        </div>
                        <div class="li">
                            <div class="p_1">房间数</div>
                            <div class="p_2">{{ li.roomCount }}间</div>
                        </div>
                        <div class="edit" @click.stop="toManageInfo({ openType: 4, editId: li.areaId })">
                            <image class="icon" mode="aspectFit"
                                src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_54.png" />
                        </div>
                    </div>
                </div>
                <!-- 房间管理 -->
                <div class="lis_div lis_div_5" v-if="openType == 5">
                    <div class="lis" v-for="(li, key) in list" :key="key" @click="liClick(li)">
                        <div class="li">
                            <div class="p_1">房间</div>
                            <div class="p_2">{{ li.roomName }}</div>
                        </div>
                        <div class="li">
                            <div class="p_1">创建时间</div>
                            <div class="p_2">{{ li.createTime }}</div>
                        </div>
                        <div class="edit"
                            @click.stop="toManageInfo({ openType: 5, areaId: areaId, areaName: areaName, editId: li.roomId })">
                            <image class="icon" mode="aspectFit"
                                src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_54.png" />
                        </div>
                    </div>
                </div>
                <!-- 用户管理 -->
                <div class="lis_div lis_div_6" v-if="openType == 6">
                    <div class="lis" v-for="(li, key) in list" :key="key" @click="liClick(li)">
                        <div class="remark">
                            <image class="icon" mode="aspectFit"
                                src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_28.png" />
                            {{ li.username }}
                            <div class="right" v-if="li.status == 1"><text class="yuan"></text> 正常入住</div>
                            <div class="right right_1" v-else><text class="yuan"></text> 已禁用</div>
                        </div>
                        <div class="li">
                            <div class="p_1">手机号</div>
                            <div class="p_2">{{ li.phone }}</div>
                        </div>
                        <div class="li">
                            <div class="p_1">房间数</div>
                            <div class="p_2">{{ li.roomCount }}间</div>
                        </div>
                    </div>
                </div>
            </z-paging>
        </div>
        <div v-if="openType == 1" class="pub_btn pub_btn_big_normal" @click.stop="toManageInfo({ openType: 1 })"
            :style="{ 'bottom': `calc(${statusBottomHeight}px + 32rpx)` }">
            新增收费方案
        </div>
        <div v-if="openType == 2" class="pub_btn pub_btn_big_normal" @click.stop="toManageInfo({ openType: 2 })"
            :style="{ 'bottom': `calc(${statusBottomHeight}px + 32rpx)` }">
            新增预警方案
        </div>
        <div v-if="openType == 3" class="pub_btn pub_btn_big_normal" @click.stop="toManageInfo({ openType: 3 })"
            :style="{ 'bottom': `calc(${statusBottomHeight}px + 32rpx)` }">
            新增客户
        </div>
        <div v-if="openType == 4" class="pub_btn pub_btn_big_normal" @click.stop="toManageInfo({ openType: 4 })"
            :style="{ 'bottom': `calc(${statusBottomHeight}px + 32rpx)` }">
            新增区域
        </div>
        <div v-if="openType == 5" class="pub_btn pub_btn_big_normal"
            @click.stop="toManageInfo({ openType: 5, areaId: areaId, areaName: areaName })"
            :style="{ 'bottom': `calc(${statusBottomHeight}px + 32rpx)` }">
            新增房间
        </div>
    </view>
</template>

<script>
export default {
    data() {
        return {
            headerConfig: {
                title: '',//标题栏内容
                header_color: '#fff'
            },
            otherHeight: getApp().globalData.otherHeight,
            headerHeight: getApp().globalData.headerHeight,
            statusBottomHeight: getApp().globalData.statusBottomHeight,
            isChoose: false,//是否为选择页面
            openType: 0,//1收费方案  2预警方案  3用户管理  4区域管理  5房间管理  6根据房间获取用户列表
            openTypeTitle: ['', '收费方案', '预警方案', '用户管理', '区域管理', '房间管理', '用户列表'],
            list: [],
            areaId: '',//openType为5时有值
            areaName: '',//openType为5时有值
            keyword: "",//openType为3时有值
            roomId: "",//openType为6时有值

            billingTypeArr: [{ id: 1, name: '固定电价' }, { id: 2, name: '梯度电价' }, { id: 3, name: '复费率电价' }],
        };
    },
    onLoad(options) {
        console.log('list', options);
        this.openType = Number(options.openType) || 3;
        this.isChoose = options.isChoose || false;
        if (this.openType == 5) {
            this.areaId = options.areaId;
            this.areaName = options.areaName;
        } else if (this.openType == 6) {
            this.roomId = options.roomId;
        }
        this.headerConfig.title = this.openTypeTitle[this.openType];
        // 支付宝小程序设置状态栏文字颜色
        this.$comFun.setZfbNavigationBar();

        setTimeout(() => {
            this.$comFun.openLoading();
            this.$refs.Zpaging.reload()
        }, 400);

        const that = this;
        uni.$off(`manageListReload_${this.openType}`);
        uni.$on(`manageListReload_${this.openType}`, function (data) {
            console.log(`manageListReload_${that.openType}`);
            that.$refs.Zpaging.reload()
        })
    },
    methods: {
        keywordConfirm() {
            this.$comFun.openLoading();
            this.$refs.Zpaging.reload()
        },
        async getList(pageNum, pageSize) {
            let data = {
                pageNum: pageNum,
                pageSize: pageSize,
            };
            if (this.openType == 3) data.keyword = this.keyword;
            if (this.openType == 4) data.statRoom = 1;
            if (this.openType == 5) data.areaId = this.areaId;
            if (this.openType == 6) data = {};
            let urls = ['', 'mobile/manager/pricePlan', 'mobile/manager/warn_scheme', 'mobile/manager/tenant', 'mobile/manager/area', `mobile/manager/area/${this.areaId}/room`, `mobile/manager/tenant/room/${this.roomId}`];
            if (!urls[this.openType]) return;
            const res = await this.$request.get(urls[this.openType], data);
            this.$comFun.closeLoading();
            // console.log(res);
            if (res.code == 200) {
                let list = res.data?.data || [];
                if (this.openType == 1) {
                    list.forEach(li => {
                        // 梯度电价
                        if (li.billingType == 2) {
                            let unitPriceArr = li.priceConfig.tiers.map(li => {
                                return li.unitPrice
                            })
                            li.priceConfig.unitPrice = unitPriceArr.join("、")
                        }
                        // 收费类型
                        let find = this.billingTypeArr.find(bli => {
                            return bli.id == li.billingType
                        })
                        li.billingTypeName = find ? find.name : '';
                    })
                }
                if (this.openType == 2) {
                    list.forEach(li => {
                        li.warnMethodName = li.sppcpWarnMethod.name || '';
                    })
                }
                if (this.openType == 6) {
                    list = res.data || [];
                }
                console.log(list);
                this.$refs.Zpaging.complete(list);
            } else {
                this.$refs.Zpaging.complete(false);
            }
        },
        liClick(info) {
            if (this.isChoose) {
                uni.$emit(`addDeviceChooseBack`, {
                    openType: this.openType,
                    info: info
                });
                setTimeout(() => {
                    this.$comFun.closeWin();
                }, 100)
            }
        },
        reloadList() {
            this.$comFun.openLoading();
            this.$refs.Zpaging.reload()
        },
        toManageInfo(data) {
            this.$comFun.openWin('/pages/manage/manage_info', data);
        }
    },
};
</script>
<style lang="scss" scoped>
@import "@/common/css/manage.scss";
</style>
